<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片时钟</title>
<style>
body{background:#000;}
.time{position:absolute;top:50%;left:50%;margin:-150px 0 0 -140px;}
span{font-size:60px; color:#fff;font-weight:bold;}
</style>
<script>
window.onload=function(){
	var oImg = document.getElementsByTagName('img');

	setInterval(toTime,1000);
	toTime();

	function toTime(){
		var date = new Date;       //获取当前日期
		// var t = date.getDay();
		var h = date.getHours()-4;   //获取当前   时
		var m = date.getMinutes(); //获取当前   分
		var s = date.getSeconds(); //获取当前   秒

		var sTime = toDou(h) + toDou(m) + toDou(s);

		for(var i=0;i<oImg.length;i++){
			oImg[i].src = 'images/img/'+sTime.charAt(i)+'.png';
		}

	}
	function toDou(num){
		if(num<10){
			return '0'+num;
		}else{
			return ''+num;
		}
	}


};
</script>
</head>

<body>
	<div class="time">
		<img src="images/img/2.png">
		<img src="images/img/2.png">
		<span>:</span>
		<img src="images/img/4.png">
		<img src="images/img/5.png">
		<span>:</span>
		<img src="images/img/0.png">
		<img src="images/img/9.png">
	</div>



</body></html>